<template>
  <div
    :style="{ justifyContent: myDataList.length > 0 ? 'space-between' : 'flex-end' }"
    class="cardBox">
    <el-divider content-position="left">
      <span style="font-weight: bold">我的课程</span>
    </el-divider>
    <div
      v-for="item in myDataList"
      :key="item.id"
      class="cardItem"
      @click="toDetail(item.id)">
      <div class="cardItemTop">
        <img
          :src="item.cover ? item.cover : require('@/assets/dash/default.png')"
          class="itemImg" />
        <div class="cardItemTopRight">
          <div class="cardItemTopRightTime">
            <img src="@/assets/dash/time.png" />
            <span>{{ item.startTime }}</span>
            <el-dropdown
              v-permission="['course:delete']"
              trigger="hover"
              class="item-handle"
              @command="handleCommand">
              <i class="el-icon-s-tools" />
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  :command="beforeHandleCommand(item.id, 'del')"
                  icon="el-icon-delete"
                  >删除</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <span class="cardTitle">{{ item.title }}</span>
        </div>
      </div>
      <div class="cardItemMiddle">{{ item.contentText }}</div>
      <div class="cardItemBottom">
        <div class="itemProcess">
          <div
            :style="{ width: `${item.rate}%` }"
            class="itemProcessInner" />
        </div>
        <div class="processTxt">
          <img src="@/assets/dash/user.png" />
          <span
            >{{ item.passUser ? item.passUser : 0 }}/{{
              item.totalUser == 0 || item.totalUser ? item.totalUser : 0
            }}</span
          >
        </div>
      </div>
    </div>
    <div
      v-for="(item, index) in other"
      :key="'other_' + index"
      :style="{ marginLeft: myDataList.length > 0 ? '0' : '30px' }"
      class="iconBox"
      @click="toOther(item.pathName)">
      <img
        :src="item.icon"
        class="icon" />
      <span class="addTitle">{{ item.title }}</span>
    </div>
    <el-divider content-position="left">
      <span style="font-weight: bold">其他课程</span>
    </el-divider>
    <div
      v-for="item in otherDataList"
      :key="item.id"
      class="cardItem"
      @click="toCourse(item.id)">
      <div class="cardItemTop">
        <img
          :src="item.cover ? item.cover : require('@/assets/dash/default.png')"
          class="itemImg" />
        <div class="cardItemTopRight">
          <div class="cardItemTopRightTime">
            <img src="@/assets/dash/time.png" />
            <span>{{ item.startTime }}</span>
          </div>
          <span class="cardTitle">{{ item.title }}</span>
        </div>
      </div>
      <div class="cardItemMiddle">{{ item.contentText }}</div>
      <div class="cardItemBottom">
        <div class="itemProcess">
          <div
            :style="{ width: `${item.rate}%` }"
            class="itemProcessInner" />
        </div>
        <div class="processTxt">
          <img src="@/assets/dash/user.png" />
          <span
            >{{ item.passUser ? item.passUser : 0 }}/{{
              item.totalUser == 0 || item.totalUser ? item.totalUser : 0
            }}</span
          >
        </div>
      </div>
    </div>
    <div
      class="moreBox"
      @click="toOther('ListCourse')">
      点击查看更多<img src="@/assets/dash/more.png" />
    </div>
  </div>
</template>
<script>
import { postData } from "@/api/common";
import { apiCourseOverview } from "@/api/stat/course";
import permission from "@/directive/permission/index.js"; // 权限判断指令
export default {
  directives: { permission },
  data() {
    return {
      myDataList: [],
      otherDataList: [],
      other: [{ title: "添加课程", icon: require("@/assets/dash/add.png"), pathName: "AddCourse" }],
      listQuery: {
        current: 1,
        size: 50,
        params: {
          title: "",
        },
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    toCourse(id) {
      window.open("http://111.63.183.17:8082/#/web/course/view/" + id, "_blank");
    },
    toDetail(id) {
      this.$router.push({ name: "UpdateCourse", params: { id: id } });
    },
    toOther(pathName) {
      this.$router.push({ name: pathName });
    },
    getList() {
      this.listQuery.t = new Date().getTime();
      postData("/api/course/course/paging", this.listQuery).then((response) => {
        this.myDataList = [];
        this.otherDataList = [];
        response.data.records.map((item) => {
          const statRes = this.getStat(item.id);
          if (statRes) {
            item.totalUser = statRes.totalUser;
            item.passUser = statRes.passUser;
            item.rate = statRes.passRate;
          }
          if (item.isCurrentVisible == true) {
            this.myDataList.push(item);
          } else {
            this.otherDataList.push(item);
          }
        });
      });
    },
    async getStat(courseId) {
      try {
        const res = await apiCourseOverview(courseId);
        return res ? res.data : null;
      } catch (err) {
        console.log("统计查询失败");
        return null;
      }
    },
    beforeHandleCommand(id, name) {
      return {
        name: name,
        id,
      };
    },
    handleCommand(e) {
      if (e.name == "del") {
        this.delCourse(e.id);
      }
    },
    delCourse(id) {
      this.$confirm("确实要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        postData("/api/course/course/delete", { ids: [id] }).then(() => {
          this.getList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      });
    },
  },
};
</script>
<style scoped lang="scss">
.el-divider__text {
  background-color: #f5f6fa !important; /* 设置背景透明 */
}
.el-divider {
  border: 1px solid #dcdfe6; /* 设置分割线的粗细和颜色 */
  font-weight: 700;
}
.cardBox {
  width: calc(100% + 30px);
  margin-top: 30px;
  color: #aab2c3;
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  flex-wrap: wrap;
  .cardItem {
    min-width: 300px;
    width: calc(25% - 30px);
    height: 225px;
    border-radius: 16px;
    font-size: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
    margin-right: 30px;
    margin-bottom: 30px;
    padding: 20px;
    box-sizing: border-box;
    .cardItemTop {
      display: flex;
      .itemImg {
        width: 80px;
        height: 92px;
        border-radius: 16px;
        object-fit: cover;
      }
      .cardItemTopRight {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20px;
        padding: 4px 0;
        box-sizing: border-box;
        flex: 1;
        .cardItemTopRightTime {
          display: flex;
          align-items: center;
          position: relative;
          img {
            width: 14px;
            height: 14px;
            margin-right: 6px;
          }
          .item-handle {
            font-size: 16px;
            position: absolute;
            top: -12px;
            right: -10px;
            cursor: pointer;
          }
          .el-icon-s-tools {
            padding: 10px 10px 5px 10px;
          }
        }
        .cardTitle {
          margin-top: 10px;
          font-size: 18px;
          color: #140e35;
          font-weight: bold;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .cardItemMiddle {
      color: #565772;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .cardItemBottom {
      height: 30px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      border-top: 1px solid #e3e3e3;
      .itemProcess {
        width: calc(100% - 70px);
        height: 8px;
        background: #f0f2f5;
        position: relative;
        .itemProcessInner {
          height: 8px;
          background: #4880ff;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
      .processTxt {
        display: flex;
        align-items: center;
        img {
          width: 12px;
          height: 14px;
          margin-right: 6px;
        }
      }
    }
  }
  .iconBox {
    min-width: 300px;
    width: calc(25% - 30px);
    height: 225px;
    border-radius: 16px;
    color: #aab2c3;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    margin-right: 30px;
    margin-bottom: 30px;
    .icon {
      width: 60px;
      height: 60px;
      margin-top: -20px;
    }
    .addTitle {
      position: absolute;
      top: calc(50% + 40px);
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .moreBox {
    width: 100%;
    height: 50px;
    background: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    img {
      width: 20px;
      height: 20px;
      margin-left: 18px;
    }
  }
}
</style>
